<template>
  <div class="Info">
    <!-- 个人信息,导航 -->
    <van-nav-bar
      class="nav-main"
      title="个人信息"
      left-arrow
      :fixed="true"
      @click-left="$router.go(-1)"
      right-text="保存"
      @click-right="save"
    />
    <div class="content">
      <myCell
        title="头像"
        type="img"
        :value="user.photo"
        @click.native="showUpload"
      ></myCell>
      <myCell
        title="昵称"
        @click.native="showName = true"
        :value="user.name"
      ></myCell>
      <myCell
        title="介绍"
        @click.native="showSignature = true"
        :value="user.intro"
      ></myCell>
      <myCell
        title="性别"
        :value="user.gender === 0 ? '男' : '女'"
        @click.native="showGender = true"
      ></myCell>
      <myCell
        title="生日"
        @click.native="showDate = true"
        :value="user.birthday"
      ></myCell>
    </div>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="genderObj"
        @cancel="showGender = false"
        @confirm="genderConfirm"
        v-model="user.gender"
      ></van-picker>
    </van-popup>
    <!-- 修改生日 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showDate = false"
        @confirm="dateConfirm"
      ></van-datetime-picker>
    </van-popup>
    <!-- 修改昵称 -->
    <van-popup v-model="showName" position="bottom">
      <van-field
        v-model="user.name"
        @cancel="showName = false"
        autosize
        type="textarea"
        maxlength="10"
        placeholder="请输入要修改的昵称"
        show-word-limit
      ></van-field>
      <!-- <van-button type="primary" size="small">确定</van-button> -->
    </van-popup>
    <!-- 修改签名 -->
    <van-popup v-model="showSignature" position="bottom">
      <van-field
        v-model="user.intro"
        @cancel="showSignature = false"
        autosize
        type="textarea"
        maxlength="60"
        placeholder="请输入个性签名"
        show-word-limit
      ></van-field>
      <!-- <van-button type="primary" size="small">确定</van-button> -->
    </van-popup>
    <!-- 头像上传 -->
    <upload ref="upload" @passimg="passimg"></upload>
    <!-- <van-popup v-model="showUpload">
      <van-uploader>
        <van-button icon="plus" type="primary">上传文件</van-button>
      </van-uploader>
    </van-popup> -->
    <div class="button">
      <van-button @click="unLogin" round type="info" block>退出登录</van-button>
    </div>
  </div>
</template>

<script>
import { localDel } from '@/utils/mylocal'
import upload from './upload'
import myCell from '../home/my/myCell'
import { apiUpdate, apiGetUser, apiGetProfile } from '@/api/use'
export default {
  data () {
    return {
      message: '',
      showGender: false,
      showDate: false,
      showName: false,
      showSignature: false,
      // showUpload: false,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2025, 0, 1),
      currentDate: new Date(),
      user: {},
      genderObj: ['男', '女']
    }
  },
  components: {
    myCell,
    upload
  },
  methods: {
    /* 退出登录 */
    unLogin () {
      /* 清除token */
      this.$dialog.confirm({
        message: '是否退出登录?'
      })
        .then(() => {
          localDel('token')
          this.$router.push('/index')
        })
        .catch(() => {
          return false
        })
    },
    // 成功上传图片
    passimg (img) {
      this.user.photo = img
    },
    // 相册的弹框,封装就要利用父传子获得upload的属性
    showUpload () {
      this.$refs.upload.show = true
    },
    /* 生日时间 */

    dateConfirm (value) {
      var a = value.getFullYear()
      var b = value.getMonth() + 1
      var c = value.getDate()
      var val = `${a}-${b}-${c}`
      this.user.birthday = val
      this.showDate = false
    },
    /* 性别 */
    genderConfirm (value) {
      this.user.gender = value === '女' ? 1 : 0
      this.showGender = false
      //   this.save()
    },
    /* 保存用户信息 */
    async save () {
      // 将修改后的数据提交到服务器,给保存添加点击事件.@click-right 封装api 向服务器发送请求,最后提示用户this.$toast.success
      await apiUpdate(this.user)
      this.$toast.success('用户信息更新成功')
      this.$router.push('/my')
    },
    async getUse () {
      const res = await apiGetUser()
      //   console.log(res)
      this.$set(this.user, 'name', res.data.data.name)
      this.$set(this.user, 'photo', res.data.data.photo)
      this.$set(this.user, 'intro', res.data.data.intro)
    },
    // 得到用户个人资料
    async genderProfile () {
      const res = await apiGetProfile()
      this.$set(this.user, 'gender', res.data.data.gender)
      this.$set(this.user, 'birthday', res.data.data.birthday)
    }
  },
  created () {
    // 渲染用户数据
    this.getUse()
    this.genderProfile()
  }
}
</script>

<style lang="less" scoped>
.Info {
  margin-top: 46px;
  font-size: 20px;
  background-color: #f5f7f9;
  .nav-main {
    background-color: #3e9df8;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
  }
  /deep/ i.van-icon.van-icon-arrow-left.van-nav-bar__arrow,
  /deep/ .van-nav-bar__text {
    color: #fff;
  }
  .button {
    padding: 30px 15px 0;
  }
}
</style>
